<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东登陆</title>
    <style>
        /** 首先清除所有的边距 */
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            width: 990px;
            height: 60px;
            margin: 0 auto;
            padding: 10px 0;
        }
        .header .logo {
            margin-right: 20px;
        }
        .header a {
            color: #999999;
            float: right;
            padding-top:40px;
            font-size:13px;
        }
        .header a:hover span {
            color: red;
            border-bottom:1px solid red;
        }

        .header a img {
            /** 垂直居中对齐 */
            vertical-align: middle;
            font-size: 13px;
        }

        .header_top {
            background-color: #fff8f0;
        }

        .header_top p {
            line-height: 40px;
            text-align: center;
            margin: 0 auto;
            font-size: 12px;
            color: #999999;
        }
        .header_top p img {
            vertical-align: middle;
            font-size: 12px;
            margin-right: 5px;
            margin-top: -4px;
        }

        .header_top p a {
            color: black;
        }

        .header_top p a:hover{
            border-bottom: 1px solid black;
        }

        .content {
            background-color: #e93854;
        }

        .content .contion {
            width: 990px;
            height: 475px;
            margin: 0 auto;
            background: url("img/background.png");
        }
        .content .contion .login{
            width: 346px;
            height: 398px;
            float: right;
            margin-top: 10px;
            background-color: white;
        }

        .content .contion .login .login_header {
            width: 346px;
            line-height: 40px;
            background: #fff8f0 url("img/icon-tips.png") no-repeat 20px center;
            font-size: 12px;
            text-align: center;
            color: #999999;
        }

        .content .contion .login .login_a {
            /*display: inline-block;*/
            width: 50%;
            line-height: 55px;
            text-align: center;
            text-decoration: none;/* 删除下划线 */
            color: black;
            font-size: 18px;
            border-bottom: 1px solid #f4f4f4;

            /*line-height: 16px;*/
            margin-right: 20px;
            cursor: pointer;
        }

        .other{
            margin: 0  16px;
        }

        .content .contion .login .login_a::after {
            clear: both;
        }

        .content .contion .login .login_a:hover {
            color: red;
        }
        .content .contion .login .login_content {
            width: 304px;
            height: 38px;
            border: 1px solid #999999;
            margin: 0 auto;
            margin-top: 30px;
        }

        .content .contion .login .login_content:nth-of-type(1){
            margin-bottom: -10px;
        }

        .content .contion .login .login_content i {
            height: 38px;
            width: 39px;
            float: left;
            border-right: 1px solid #999999;
        }

        /** 第一个 */
        .login_content:nth-of-type(1) i {

            background: url("img/pwd-icons-new.png") no-repeat;
        }

        /** 第二个输入框 */
        .login_content:nth-of-type(2) i {
            background: url("img/pwd-icons-new.png") no-repeat -48px 0;
        }

        .login_content input {
            /*box-sizing: border-box就是将border和padding数值包含在width和height之内,这样的好处就是修改border和padding数值盒子的大小不变。*/
            box-sizing: border-box;
            width: 250px;
            height: 38px;
            border: none;
            padding-left: 10px;
            outline: none;
        }

        .content .contion .login .fpwd a {
            font-size: 12px;
            border-bottom: none;
            margin-left: 280px;
            line-height: 55px;
            color: black;
            text-decoration: none;
        }

        .content .contion .login .fpwd a:hover {
            border-bottom: 1px solid red;
            color: red;
        }

        .login .login_b{
            display: inline-block;
            width: 304px;
            line-height: 33px;
            margin: 0 21px;
            background-color: #e4393c;
            text-align: center;
            text-decoration: none;
            color: white;
            font-size: 18px;
        }

        .login_footer {
            background-color: white;
            height: 50px;
            margin: 34px 20px 0 20px;
            width: 306px;
        }

        .login_footer .footer_c {
            line-height: 50px;
            text-decoration: none;
            color: #999999;
        }
        .login_footer a:nth-of-type(3){
            color: red;
        }

        .login_footer .footer_c i{
            display: inline-block;
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }

        .footer_c:nth-of-type(1) i {
            background: url("img/QQ-weixin.png") no-repeat;
        }

        .footer_c:nth-of-type(2) i {
            background: url("img/QQ-weixin.png") no-repeat -20px 0;
        }

        .footer_c:nth-of-type(3){
            float: right;
        }

        .footer_c:nth-of-type(3) i {
            background: url("img/pwd-icons-new.png") no-repeat -103px -75px;
        }

        .footer {
            width: 845px;
            margin: 0 auto;
            text-align: center;
            color: gray;
            font-size: 14px;
            margin-top: 20px;
        }

        .footer a {
            text-decoration: none;
            color: gray;
        }

        .footer p {
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="header">
    <img src="img/logo-201305-b.png" class="logo">
    <img src="img/l-icon.png" alt="">
    <a href="#" class="header_one">
        <img src="img/q-icon.png" alt="">
        <span>登陆页面，调查问卷</span>
    </a>
</div>

<div class="header_top">
    <p>
        <img src="img/icon-icon-tips.png" alt="">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版
        <a href="">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。
    </p>
</div>

<div class="content">
    <div class="contion">
        <div class="login">
            <p class="login_header">京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
            <div class="other">
                <a href="#" class="login_a">扫码登陆</a>
                <a href="#" class="login_a">账户登陆</a>
            </div>

            <form action="#">
                <div class="login_content">
                    <i></i>
                    <input type="text" name="user" value="" placeholder="邮箱/用户名/手机">
                </div>
                <div class="login_content">
                    <i></i>
                    <input type="text" name="password" value="" placeholder="密码">
                </div>
                <div class="fpwd">
                    <a href="#">忘记密码</a>
                </div>
                <a href="#" class="login_b">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;陆</a>
            </form>
            <div class="login_footer">
                <a href="#" class="footer_c"><i></i>QQ</a>
                <a href="#" class="footer_c"><i></i>微信</a>
                <a href="#" class="footer_c"><i></i>立即注册</a>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <a href="#"> 关于我们</a><span>&nbsp;|&nbsp;</span>
    <a href="#"> 联系我们 </a><span>&nbsp;|&nbsp;</span>
    <a href="#"> 人才招聘</a><span>&nbsp;|&nbsp;</span>
    <a href="#"> 商家入驻</a><span>&nbsp;|&nbsp;</span>
    <a href="#"> 广告服务</a><span>&nbsp;|&nbsp;</span>
    <a href="#"> 手机京东</a><span>&nbsp;|&nbsp;</span>
    <a href="#"> 友情链接</a><span>&nbsp;|&nbsp;</span>
    <a href="#"> 销售联盟</a><span>&nbsp;|&nbsp;</span>
    <a href="#"> 京东社区</a><span>&nbsp;|&nbsp;</span>
    <a href="#"> 京东公益</a><span>&nbsp;|&nbsp;</span>
    <a href="#"> English Site</a>
    <p class="footer_m">Copyright © 2004-2023 京东JD.com 版权所有</p>
</div>
</body>
</html>